<template>
  <div class="favorites-section" v-if="favorites.length">
    <h2>
      <i class="fa fa-bookmark"></i>
      收藏的名字
      <span class="favorite-count">({{ favorites.length }})</span>
    </h2>
    <transition-group 
      name="favorite-list" 
      tag="div" 
      class="favorites-grid"
    >
      <div v-for="(fav, index) in favorites" 
           :key="fav.fullName" 
           class="favorite-name"
      >
        <div class="favorite-content">
          <span class="fav-name">{{ fav.fullName }}</span>
          <div class="fav-meaning">{{ fav.meaning }}</div>
          <div class="fav-source" v-if="fav.source">
            <small>
              {{ fav.source.first }}<br>
              {{ fav.source.second }}
            </small>
          </div>
        </div>
        <button 
          @click="$emit('remove', index)" 
          class="remove-btn"
          title="删除收藏"
        >
          <i class="fa fa-trash"></i>
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'FavoriteList',
  props: {
    favorites: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.favorites-section {
  margin-top: var(--spacing-xl);
  padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
  background-color: var(--bg-light);
  border-radius: var(--border-radius-lg);
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.favorite-name {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.fav-name {
  font-size: 1.2rem;
  font-weight: bold;
}

.fav-meaning {
  font-size: 0.9rem;
  color: #666;
  margin-top: var(--spacing-xs);
}

.fav-source {
  margin-top: var(--spacing-xs);
  font-size: 0.8rem;
  color: #666;
}

.remove-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--secondary-color);
  cursor: pointer;
  padding: var(--spacing-xs);
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.favorite-name:hover .remove-btn {
  opacity: 1;
}

.remove-btn:hover {
  color: #ff0000;
  transform: scale(1.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .favorites-section {
    margin-top: var(--spacing-lg);
  }

  .favorites-grid {
    grid-template-columns: 1fr;
  }

  .favorite-name {
    flex-direction: column;
  }

  .remove-btn {
    align-self: flex-end;
  }
}

/* 触摸设备优化 */
@media (hover: none) {
  .favorite-name:hover {
    transform: none;
  }

  .remove-btn {
    padding: var(--spacing-md);
  }
}

.favorite-count {
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-left: var(--spacing-sm);
}

.favorite-content {
  flex: 1;
}

/* 列表动画 */
.favorite-list-enter-active,
.favorite-list-leave-active {
  transition: all 0.3s ease;
}

.favorite-list-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.favorite-list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.favorite-list-move {
  transition: transform 0.3s ease;
}

/* 删除按钮动画 */
.remove-btn {
  opacity: 0;
  transition: all 0.3s ease;
}

.favorite-name:hover .remove-btn {
  opacity: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .remove-btn {
    opacity: 1;
    padding: var(--spacing-md);
  }
}
</style> 